<template>
  <Card title="联系方式" :divider-margin="[24, 0, 0, 0]">
    <template #header-right>
      <tm-button
        type="primary"
        size="small"
        :margin="[0]"
        :round="10"
        :width="112"
        :font-size="24"
        :height="48"
        icon="ali-icon icon-edit"
        label="编辑"
        @click="handleEdit"
      ></tm-button>
    </template>
    <Cell title="手机号" :right-text="botCardInfo.botInfoVo?.phone" :show-icon="false" />
    <Cell title="微信" :right-text="botCardInfo.botInfoVo?.wechatId" :show-icon="false" />
    <Cell title="邮箱" :right-text="botCardInfo.botInfoVo?.email" :show-icon="false" />
  </Card>
</template>

<script lang="ts" setup>
  /* 联系方式组件 */
  import { BotCardInfo } from '@/api/card/type';
  import Card from '../../components/Card/index.vue';
  import Cell from '../../components/Cell/index.vue';
  import { navigateTo } from '@/router';
  const props = defineProps<{
    botCardInfo: BotCardInfo;
  }>();
  const emit = defineEmits<{
    (e: 'success'): void;
  }>();
  const handleEdit = () => {
    navigateTo({
      name: 'contactInfoEdit',
      options: {
        success: () => {
          emit('success');
        },
      },
    });
  };
</script>

<style lang="scss" scoped>
  /* 使用Windi CSS，无需额外样式 */
</style>
